import { useRequest } from 'ahooks';
import { Form, Input, Select } from 'antd'
import { useCallback } from 'react'
import { getProjectGroupApi } from '../../../../api/pro';

const { Search } = Input
const { Option } = Select
const WarePriceForm = (props) => {
  const { filter, setFilter } = props
  const { data: groupData } = useRequest(getProjectGroupApi)
  const onSearch = useCallback((v) => {
    setFilter({ ...filter, search: v })
  })
  const onCategoryChange = useCallback((v = '') => {
    setFilter({ ...filter, category: v })
  })
  return (
    <Form layout="inline" style={{ margin: '20px 0 10px' }}>
      <Form.Item label="搜索">
        <Search placeholder="请输入关键词" onSearch={onSearch} enterButton />
      </Form.Item>
      <Form.Item label="分类">
        <Select value={filter.category} style={{ width: '100px' }} allowClear onChange={onCategoryChange}>
          {
            groupData?.map((item) => <Option key={item} value={item}>{item}</Option>)
          }
        </Select>
      </Form.Item>
    </Form>
  )
}

export default WarePriceForm
